<template>
    <div class="cus-textarea-container">
        <el-input
            class="srt-el-input"
            @keyup.enter="enterForm"
            @input="onInput"
            @blur="handleBlur"
            v-model="value"
            :placeholder="props.placeholder"
            :type="props.inputType"
            :readonly="disabled"
            :rows="5"
            :maxlength="maxLength"
            show-word-limit>
        </el-input>
    </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

const emit = defineEmits(['update:modelValue', 'input', 'keyup', 'blur']);

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: '',
    },
    placeholder: {
        type: String,
        default: '请输入',
    },
    maxLength: { // 最多输入 0就是不限制
        type: [String, Number],
        default: 0,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    minLength: { // 最少输入 0就是不限制
        type: [String, Number],
        default: 0,
    },
    isOffset: { // 滚动条与边框是否有间隔, 配合答题使用
        type: Boolean,
        default: false, 
    },
    inputType: {
        type: String,
        default: 'textarea', 
    },
    isEnter: {
        type: Boolean,
        default: false, 
    }
})

 // 绑定控件的值
const value = ref('');

const realLength = computed(() => {
    return value.value.length;
})

// 是否超过
const isExceed = computed(() => {
    let valid = true;
    if(realLength.value === 0) {
        return !valid;
    }
    
    if(props.maxLength && props.minLength) {
       valid && realLength.value <= props.maxLength && realLength.value >= props.minLength;
    }
    if(!props.maxLength && props.minLength) {
        valid && realLength.value >= props.minLength
    }
    if(props.maxLength && !props.minLength) {
        valid && realLength.value <= props.maxLength
    }

    return !valid;
})


const textLength = computed(() => {
    let result = '';

    let minLen = props.minLength && Number(props.minLength);

    let maxLen = props.maxLength && Number(props.maxLength);

    if(minLen && maxLen) {
        result = `/${minLen}-${maxLen}`
    }
    if(!minLen && maxLen) {
        result = props.isOffset ? `/至多${maxLen}字` : `/${maxLen}`;
    }
    if(minLen && !maxLen) {
        result = props.isOffset ? `/至少${minLen}字` : `/${minLen}`;
    }

    // let len = minLen || maxLen;

    if(!result) {
        result = '/不限字数';
    }

    return result;
})


 // 监听属性，给 value 赋值
watch(() => props.modelValue, (v1, v2) => {
    value.value = v1;
}, {immediate: true});

/** 
 * 向父组件提交事件更新数据 
 */
function onInput(e) {

    emit('update:modelValue', e);
    emit('input', e);
}


function enterForm() {
    if(props.isEnter){
       emit('keyup'); 
    }else{
        return false;
    }
}

function handleBlur() {
    emit('blur');
}



</script>

<style lang="scss" scoped>
.cus-textarea-container {
    :deep(.srt-el-input) {
        .el-textarea__inner {
            padding: 10px 12px;
            color: var(--srt-main-text-color);
        }
    }
}
</style>